<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
        <#include "/inc/head.ftl"/>
    	<@head/> 
</head>
<body>
    <div id="wrapper">
          <!-- Navigation -->
        <#include "/inc/nav.ftl"/>
		<@nav/>
        <div id="page-wrapper">
			<div class="row">
                <div class="col-lg-12">
                <div class="panel-body">
	                    <button id="btn-add"  type="button" class="btn btn-success">添加类别</button>
                    </div>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">类别列表</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="list">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>类别名</th>
                                         <th>说明</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
     			<div class="modal-dialog">
        			<div class="modal-content">
           				<div class="modal-header">             				
                           <h4 class="modal-title" id="myModalLabel">标题</h4>
          			</div>
          			<input  id="name" type="hidden" class="form-control">
	          		<div class="modal-body"> 
	          		    <div class="row">
							 <div class="col-lg-12">
                                    <form role="form">
                                        <div class="form-group">
                                            <label>id</label>
                                            <input id="id"   class="form-control">
                                        </div>
                                        
                                        <div class="form-group">
                                            <label>类别</label>
                                            <input id="categoryName"   class="form-control">
                                        </div>
                                        <div class="form-group">
                                            <label>说明</label>
                                            <input id="explain"   class="form-control">
                                        </div>
                                    </form>
                                </div>
                            </div>
						</div>
		          		<div class="modal-footer">
		          		        <button id="btn-submit" type="submit" class="btn btn-default">提交</button>
                                <button id="btn-reset" type="reset" class="btn btn-default">重置</button>
		             			<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		               </div>
	              </div><!-- /.modal-content -->
 			  </div>
 		</div>
            
           </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
    <!-- Page-Scripts  -->
    <script>
    $(document).ready(function() {
    	var table = $('#list').DataTable({
        	"ajax": '${contextPath}/category/list',
        	"language": {
    			"url": "${contextPath}/vendor/datatables/i18n/Chinese.json"
			},
            "columns": [
                 {"data": "id","visible" : false},
    			 {"data": "categoryName"},
    			 {"data": "explain"}
    	   ],
           responsive: true,
           select: true //datatables select 插件
        });
        
        function resetForm(){
    		$("#myModal #id").val("");
    		$("#myModal #categoryName").val("");
    		$("#myModal #explain").val("");
    	}
    	
    	$('#btn-add').click( function () {
    		$('#btn-add').click( function () {
	    		resetForm();
	    		$("#myModal #name").val("");
	    		$("#myModal #myModalLabel").text("添加公告");
	    		$('#myModal').modal({keyboard:false,show:true})
            });
    	});
    	
    	$("#myModal #btn-submit").click( function () {
    		var id = $("#myModal #id").val();
    			submit("${contextPath}/category/save");
    	} ); 
    	
    	$("#myModal #btn-reset").click( function () {
    		resetForm();
    	} );
    	
    	function submit(url){
    		var id = $("#myModal #id").val();
    		var categoryName = $("#myModal #categoryName").val();
    		var explain = $("#myModal #explain").val();
    			$.ajax({
    				type : "post",
    				url : url,
    				dataType : "json",
    				data : { 
    					"category.id":id,    //注意此处的blog与Blog对应，id与Blog的属性id对应
    					"category.categoryName" : categoryName,
    					"category.explain" : explain
    				},
    				success : function(data) {
    					if(data.result){
	    					layer.msg(data.msg, {time: 1000, icon:1});
	    					resetForm();
	    					$("#myModal").modal('hide');
	    					table.ajax.reload();//重新加载table
    					}
    				},
    				error : function() {
    					layer.msg('操作失败!', {time: 1000, icon:2});
    				}
    			});
    	}
    	
    });

    </script>
    </body>
</html>